<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="限时领取" name="first">
        <CouponList :pkgNum.sync="pkgNum" ref="first" :mode="1"/>
      </el-tab-pane>
      <el-tab-pane label="我的券" name="second" lazy>
        <CouponList :pkgNum.sync="pkgNum" ref="second" :mode="2" @tab-change="onEmitTabChange"/>
      </el-tab-pane>
      <el-tab-pane label="" name="third" lazy>
        <CouponList :pkgNum.sync="pkgNum" ref="third" :mode="3"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CouponList from './components/coupon-list.vue'
export default {
  name: 'CouponIndex',
  components: {
    CouponList
  },
  data () {
    return {
      activeName: 'second',
      pkgNum: 0
    }
  },
  created () {
    const query = this.$route.query
    if (query.page === '1') {
      this.activeName = 'first'
    } else if (query.page === '2') {
      this.activeName = 'second'
    }
    this.$xz('xz_substat_action', 2741)
  },
  methods: {
    handleClick (tab) {
      // if (tab.name === 'first') {
      //   this.$xz('xz_substat_action', 1763)
      // } else if (tab.name === 'third') {
      //   this.$xz('xz_substat_action', 1774)
      // } else if (tab.name === 'second') {
      //   this.$xz('xz_substat_action', 24000)
      this.$refs[tab.name] && this.$refs[tab.name].onQuery()
      // }
    },
    onEmitTabChange (name) {
      this.activeName = name
      this.$refs[name] && this.$refs[name].onQuery()
    }
  }
}
</script>
